import 'package:flutter/material.dart';
import 'package:flutter_custom_view/src/pan_gesture_detector.dart';

const double _kThumbWidth = 15;

class AnimationSlider extends StatefulWidget {
  const AnimationSlider({
    Key? key,
    this.icon,
    this.padding = const EdgeInsets.symmetric(horizontal: 16),
    required this.value,
    this.height = 50.0,
    this.min = 0.0,
    this.max = 100.0,
    this.isSingle = false,
    this.onValueChange,
    this.onValueChangeEnd,
  }) : super(key: key);

  final Widget? icon;
  final double? min;
  final double? max;
  final EdgeInsetsGeometry? padding; //内边距
  final double height; //高度
  final double value; //进度值0-100
  final bool isSingle; //是否为单个控制条
  final ValueChanged<double>? onValueChange; //拖动时回调
  final ValueChanged<double>? onValueChangeEnd; //拖动结束时回调

  @override
  _AnimationSliderState createState() => _AnimationSliderState();
}

class _AnimationSliderState extends State<AnimationSlider> {
  double _localValue = 0.0;
  bool isHide = true;
  double maxWidth = 0.0;

  @override
  void initState() {
    super.initState();
    getLocalValue();
  }

  @override
  void didUpdateWidget(covariant AnimationSlider oldWidget) {
    if (oldWidget.value != widget.value) {
      getLocalValue();
    }
    super.didUpdateWidget(oldWidget);
  }

  getLocalValue(){
    setState(() {
      if(widget.value<widget.min!){
        _localValue = ((widget.min!-widget.min!)/(widget.max!-widget.min!));
      }else if(widget.value>widget.max!){
        _localValue = ((widget.max!-widget.min!)/(widget.max!-widget.min!));
      }else{
        _localValue = ((widget.value-widget.min!)/(widget.max!-widget.min!));
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        maxWidth = constraints.maxWidth;
        double thumbPos = _localValue * ((maxWidth - _kThumbWidth));
        return SizedBox(
          height: widget.height,
          child: Stack(
            fit: StackFit.expand,
            children: [
              AnimatedOpacity(
                duration: Duration(milliseconds: 400),
                opacity: widget.isSingle
                    ? 1.0
                    : isHide
                        ? 0.0
                        : 1.0,
                child: Stack(
                  fit: StackFit.expand,
                  children: [
                    Container(
                      height: widget.height,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(8),
                          color: Color(0xFF36363C)),
                    ),
                    Stack(
                      alignment: Alignment.centerLeft,
                      children: [
                        Container(
                          height: widget.height,
                          width: _kThumbWidth +
                              _localValue * (maxWidth - _kThumbWidth),
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(8),
                              gradient: LinearGradient(colors: [
                                Color(0xFF7f7f8a),
                                Color(0xFFc1c1cb)
                              ])),
                        ),
                        Positioned(
                          left: thumbPos,
                          child: Container(
                            height: widget.height,
                            width: _kThumbWidth,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(8),
                              color: Colors.white,
                              boxShadow: [
                                BoxShadow(
                                  blurRadius: 5.0, //阴影范围
                                  spreadRadius: 0.5, //阴影浓度
                                  color: Colors.black, //阴影颜色
                                ),
                              ],
                            ),
                          ),
                        )
                      ],
                    ),
                    Container(
                      height: widget.height,
                      padding: EdgeInsets.symmetric(horizontal: 10),
                      child: Row(
                        children: [
                          widget.icon!,
                          SizedBox(width: 10),
                          Text(
                            '${(widget.min! + (widget.max! - widget.min!) * _localValue).round()}%',
                            style: TextStyle(
                                color: Colors.white,
                                shadows: [
                                  Shadow(
                                      color: Colors.black,
                                      blurRadius: 10,
                                      offset: Offset(0.5, 0.5))
                                ]),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
              PanGestureDetector(
                disposition: (_) => PanGestureDisposition.intercept,
                onPanCancel: () {
                  setState(() {
                    isHide = true;
                  });
                },
                onPanDown: onPanDown,
                onPanUpdate: onPanUpdate,
                onPanEnd: onPanEnd,
                child: AnimatedOpacity(
                  duration: Duration(milliseconds: 400),
                  opacity: isHide ? 1.0 : 0.0,
                  child: Container(
                    height: widget.height,
                    padding: EdgeInsets.symmetric(horizontal: 10),
                    decoration: widget.isSingle
                        ? BoxDecoration(
                            borderRadius: BorderRadius.circular(8),
                          )
                        : BoxDecoration(
                            borderRadius: BorderRadius.circular(8),
                            color: Color.fromRGBO(29, 28, 33, 1.0)),
                    child: widget.isSingle
                        ? Container()
                        : Stack(
                            children: [
                              Row(
                                children: [
                                  widget.icon!,
                                  SizedBox(width: 10),
                                  Expanded(
                                      child: Slider(
                                    value: _localValue,
                                    inactiveColor:
                                        Color.fromRGBO(50, 49, 55, 1.0),
                                    activeColor: Colors.white,
                                    onChanged: (value) {},
                                  )),
                                ],
                              ),
                              Container(
                                color: Colors.transparent,
                              ),
                            ],
                          ),
                  ),
                ),
              ),
            ],
          ),
        );
      },
    );
  }

  onPanDown(DragDownDetails details) {
    setState(() {
      isHide = false;
      if (0.0 <= details.localPosition.dx &&
          details.localPosition.dx <= maxWidth) {
        widget.onValueChange?.call(widget.min! +
            (widget.max! - widget.min!) *
                (details.localPosition.dx / maxWidth));
      } else if (0.0 > details.localPosition.dx) {
        widget.onValueChange
            ?.call(widget.min! + (widget.max! - widget.min!) * (0.0));
      } else if (details.localPosition.dx > maxWidth) {
        widget.onValueChange
            ?.call(widget.min! + (widget.max! - widget.min!) * (1.0));
      }
    });
  }

  onPanUpdate(DragUpdateDetails details) {
    setState(() {
      if (0.0 > details.localPosition.dx) {
        widget.onValueChange
            ?.call(widget.min! + (widget.max! - widget.min!) * (0.0));
      } else if (0.0 <= details.localPosition.dx &&
          details.localPosition.dx <= maxWidth) {
        widget.onValueChange?.call(widget.min! +
            (widget.max! - widget.min!) *
                (details.localPosition.dx / maxWidth));
      } else if (details.localPosition.dx > maxWidth) {
        widget.onValueChange
            ?.call(widget.min! + (widget.max! - widget.min!) * (1.0));
      }
    });
  }

  onPanEnd(DragEndDetails details) {
    setState(() {
      isHide = true;
    });
    widget.onValueChangeEnd
        ?.call(widget.min! + (widget.max! - widget.min!) * (_localValue));
  }
}
